<template>
	<m-layout gap="0 0 124" barBg="var(--theme)" color="#fff" :title="typeName[type] || '分类列表'">
		<!-- <m-icon type="logo4" wh="146 50" slot="back"></m-icon> -->
		<view class="search" slot="header">
			<!-- <uni-search-bar radius="10" @confirm="reset" v-model="key" placeholder="请输入搜索内容" :cancelButton='false'
				@clear="clear">
			</uni-search-bar> -->
			<m-tabs fontSize="30rpx" bgColor="unset" :pills="true" v-model="tabIdx" height="56rpx" :tabs="classifyList"
				color="#fff" activeColor="var(--theme)" pillsColor="#fff" pillsBorderRadius="26rpx" field="tname" />

			<view class="flex"  style="padding-top: 20rpx;">
				<m-text :bold="sortPrice == 0" ftsize="28" :color="sortPrice == 0?'#333':'#fff'"
					@click="sortPrice = 0" spa="0 30 0 0">综合排序</m-text>
				<view @click="sortPrice = sortPrice == 1 ? 2 : 1">
					<m-text :bold="[1, 2].indexOf(sortPrice) != -1"
						:color=" [1, 2].indexOf(sortPrice) != -1? '#333':'#fff'">价格</m-text>
					<template v-if="[1, 2].indexOf(sortPrice) == -1">
						<m-icon spa="0 0 0 10" wh="28 22" type="sort10" />
					</template>
					<template v-else>
						<m-icon spa="0 0 0 10" wh="28 22" :type="sortPrice == 1 ? 'sort11' : 'sort12'" />
					</template>
				</view>
				<m-text :bold="sortPrice == 5" spa="0  0 0 30" @click="sortPrice = 5"
					:color="sortPrice == 5?'#333':'#fff'">销量</m-text>
			</view>
		</view>

		<m-line spa="20 0 0" color="#f6f6f6"></m-line>
		<hot-sale :ishot="type == 'hot'?1:0" :isnew="type == 'new'?1:0" :sortPrice="sort" ref="hot" :wards="isWards ? 3 : ''" :searckey="key" :tid="classifyList[tabIdx]['id']"
			:istop="0"></hot-sale>
	</m-layout>
</template>

<script>
	import { GetNewsPage } from "@/api/News.js";
	import { GetGoodsTypePage } from '@/api/Goods.js'
	import { GetGoodsPage } from '@/api/Goods.js';
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				bnannerList: [],
				tabIdx: 0,
				isWards: 0,
				scrollTop: 0,
				sortPrice: 0,
				key: '',
				type: '',
				typeName:{
					'hot':'每周上新',
					'new':'今日推荐',
				},
			};
		},
		computed: {
			...mapState({
				classifyList: state => state.goods.classifyList,
				config: state => state.general.config,
			}),
			config704() {
				return this.config[704]
			},
		},
		watch: {
			sortPrice() {
				this.reset();
			},
		},
		onPageScroll({ scrollTop }) {
			this.scrollTop = scrollTop;
		},
		onLoad({type}) {
			this.type = type;
			this.init()
		},
		onShow() {
			this.$nextTick(() => {
				let id = this.Cookie.get("classifyId", 0)
				this.tabIdx = id || 0
				this.Cookie.set("classifyId", 0)
			})

			// this.getBanner();
		},
		methods: {
			async clear() {
				this.key = '';
				await this.sleep(100)
				this.reset();
			},
			reset() {
				this.$nextTick(() => {
					this.$refs.hot.onReset();
				})
			},
			openServiceChats() {
				this.openServiceChat();
			},
			async init() {
				this.$nextTick(() => {
					this.$refs.hot.getData();
				})
			},
			search() {
				if (!this.search && this.verify) {
					return this.Toast('请输入搜索内容')
				}
				const url = '/pagesA/shopping/search/search'
				const params = this.params ? `?type=${this.params}` : ''
				this.Jump(url + params)
			},

			// 获取banner列表
			async getBanner() {
				const { success, list, msg, code } = await GetNewsPage({
					code: 'banner_goods',
					pageIndex: 1,
					pageSize: 10,
				})
				this.bnannerList = list[0]['picurl'];
			},
		},
		onReachBottom() {
			this.init();
		},
	}
</script>

<style lang="scss">
	.search {
		padding: 0 24rpx 24rpx;
	}

	.uni-searchbar {
		padding: 0 !important;
		padding-bottom: 15rpx !important;
	}

	.search-box {
		padding-bottom: 20rpx;

		.m-input {
			padding: 12rpx 18rpx !important;
			border-radius: 25rpx !important;
			background: #F8F8F8;
		}
	}


	.swiper-box {
		margin: 0rpx 24rpx 0 !important;
	}

	.v-tabs {
		.v-tabs__container {}

	}

	.title {
		padding-bottom: 20rpx;
	}


	.server-btn {
		padding: 0 !important;
		margin: 0 !important;
		border-width: 0 !important;
		border-color: unset !important;
		background: unset !important;
		line-height: 0 !important;
		cursor: not-allowed !important;
		border-image: initial;

		&::after {
			display: none;
		}
	}
</style>